<template>
	<view class="me-wrap">
		<view class="headwrap">
			<view class="content">
				<view class="topwrap">
					<view class="imgwrap" @click="fnUserLogin">
						<image class="img" :src="userInfo?userInfo.avatarurl:'../../static/img/99.png'"></image>
					</view>
					<view class="top-left">
						<view @click="drawershow=true">
							<vs-icon type="icon-shezhi" size="22" margin="5" color="#8a8a8a"></vs-icon>
						</view>
					</view>
				</view>
				<button open-type="getUserInfo"  @click="fnUserLogin" class="nickname">
						{{userInfo?userInfo.nickname:'点击登录'}}
				</button>
			</view>
			
			
		</view>
		<view class="main">
			<view class="main-top">
				<view class="top-item" @click="active=0" :style="{'border-bottom':active==0?'1px solid #ff9900':''}">视频</view>
				<view class="top-item" @click="active=1" :style="{'border-bottom':active==1?'1px solid #ff9900':''}">班级</view>
				<view class="top-item" @click="active=2" :style="{'border-bottom':active==2?'1px solid #ff9900':''}">喜欢</view>
			</view>
			<view class="content">
				<block v-for="(item,index) in myvideo.videoList" :key="index">
					<view class="i-item" @click="fnVideoFullScren(item)">
						<vs-ratio-view ratio="9/16" overflow="hidden">
							<view class="wrap">
								<video 
								:controls="false"
								:show-fullscreen-btn="false"
								:show-play-btn="false"
								:show-center-play-btn="false"
								:enable-progress-gesture="false"
								objectFit="cover"
								class="i-video" :src="item"></video>
							</view>
						</vs-ratio-view>
					</view>
				</block>
				
			</view>
		</view>
		<drawer  @close="drawershow=false" :visible="drawershow" mode="right">
			<view  :style="{width:windowWidth*0.6 + 'px',height:'100%','background-color': '#181824'}">
			</view>
		</drawer>
		<vs-videofull :playshow="playshow" :src="playsrc" @close="fnCloseVideofull"></vs-videofull>
	</view>
</template>
<script>
	const { windowWidth, windowHeight } = uni.getSystemInfoSync();
	export default{
		data(){
			return{
				windowWidth:windowWidth,
				drawershow:false,
				active:0,
				userInfo:uni.getStorageSync('userInfo'),
				playshow:false,
				playsrc:'',
				myvideo:{
					videoList:[],
					pageNum:1,
					pageSize:10,
					flag:true
				}
			}
		},
		onShow() {
			//console.log(990)
			uni.setTabBarStyle({
			 // color: '#fff',
			  borderStyle: 'white',
			  backgroundColor: '#181824',
			})
			this.userInfo=uni.getStorageSync('userInfo')
			if(this.myvideo.videoList.length==0){
				this.fnGetmyVideos()
			}

		},
		onHide() {
			uni.setTabBarStyle({
			  color: '#707070',
			  borderStyle: 'dark',
			 // backgroundColor: '#fff',
			})
		},
		onPullDownRefresh() {
			this.myvideo.videoList=[]
			this.myvideo.flag=true
			this.fnGetmyVideos()
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			},1500)
		},
		onReachBottom() {
			//this.$fun.toast('hahahah')
			this.fnGetmyVideos()
		},
		mounted() {
			//this.fnGetmyVideos()
		},
		methods:{
			
			fnUserLogin(){
				uni.navigateTo({
					url:'../mylogin/mylogin'
				})
			},
			fnGetmyVideos(){
				let {userid}=uni.getStorageSync('userInfo')
				let params={
					userid:userid,
					rqtype:'mysource',
					pageNum:this.myvideo.pageNum,
					pageSize:this.myvideo.pageSize
				}
				if(this.myvideo.flag){
					this.$fun.request(params,'php/xcx_getmyvideos.php').then(res=>{
						console.log(res)
						if(res.data.length==0){
							this.myvideo.flag=false
							return;
						}
						let arr=res.data.reduce((prev,v)=>{
							let url=JSON.parse(v.video_url)
							if(url.videourl!=""){
								prev.push(this.$http+url.videourl) 
							}
							return prev
						},[])
						console.log(arr)
						this.myvideo.videoList=this.myvideo.videoList.concat(arr)
						this.myvideo.pageNum++
					})
				}else{
					//this.$fun.toast('')
				}
				
				
			},
			fnVideoFullScren(src){
				this.playsrc=src
				this.playshow=true
				
			},
			fnCloseVideofull(){
				this.playsrc=''
				this.playshow=false
			}
			
			
		},
		
	}
</script>
<style lang="scss">
	page{
		background: #181824;
	}
	.me-wrap{
		display: block;
		.headwrap{
			width: 90%;
			margin: 0 auto;
		//	display: flex;
			//height: 60px;
			//background-image: linear-gradient(#ffb84d,#ff9900);
			//background-color: #14241b;
			
			.content{
				width:100%;
				//background-color: #2C405A;
				padding: 10px 0;
				.topwrap{
					width: 100%;
					display: flex;
					.imgwrap{
						//background-color: #007AFF;
						display: flex;align-items: center;
						.img{
							width: 80px;
							height: 80px;
							border-radius: 100%;
							//background-color: #007AFF;
						}
					}
					.top-left{
						flex: 1;
						display: flex;
						justify-content: flex-end;
						//background-color: yellow;
					}
				}
				.nickname{
					width: fit-content;
					display: block;
					background: rgba(0,0,0,0);
					font-size: 16px;
					color: #fff;
					margin-top: 5px;
					padding:0;
					margin: 0;
					text-align:left ;
					line-height: 2;
					&::after{
						border: 0;
					}
					
				}
			}
		}
		.main{
			width: 100%;
			//background-color: #15BB31;
			display: flex;
			flex-direction: column;
			align-items: center;
			.main-top{
				width: 90%;
				display: flex;
				//background: #007AFF;
				.top-item{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 10px ;
					color: #fff;
					font-size: 16px;
					border-bottom: 1px solid #181824;
				}
				
			}
			.content{
				width: 100%;
				//height: 50px;
				//padding: 10px;
				//background-color: #007AFF;
				display: flex;
				flex-wrap: wrap;
				
				.i-item{
					//flex: 1;
					width: 33.333%;
					background: #15BB31;
					position: relative;
					
					//margin: 2px;
					.wrap{
						height: 100%;
						background-color: #2C405A;
						.i-video{
							width: 100%;
							height: 100%;
						}
					}
					
					
				}
				.i-item:nth-of-type(3n-1)  .wrap{
						border-left: 1px solid #181824;
						border-right: 1px solid #181824;
						//background-color: #ff753e;
					}
				
			}
			
		}
		
	}
</style>